<template>
  <div class="p-3">
    <a-form>
      <a-form-item class="!mb-3">
        <a-button type="primary" @click="add">新增</a-button>
      </a-form-item>
    </a-form>
    <a-table
      :bordered="true"
      :columns="columns"
      row-key="id"
      :data-source="pageData"
      :pagination="pagination"
      :loading="loading"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'oper'">
          <a-space>
            <a-button type="primary" @click="remove(record)">移除白名单</a-button>
          </a-space>
        </template>
      </template>
    </a-table>
    <MemberListModal v-model:visible="userListModal" />
  </div>
</template>
<script lang="ts" setup>
import { defineComponent, onMounted, reactive, ref } from "vue";
import { getWhitelists } from "/@/api/manage/setting";
import { usePagination } from "/@/hooks/web/usePagination";
import MemberListModal from "/@/components/MemberListModal.vue";

const columns = [
  {
    title: "ID",
    dataIndex: "id",
  },
  {
    title: "昵称",
    dataIndex: "nickName",
  },
  {
    title: "真实姓名",
    dataIndex: "name",
  },
  {
    title: "手机号码",
    dataIndex: "cellphone",
  },
  {
    title: "操作",
    key: "oper",
  },
];
const { refreshPagination, pagination, pageData, loading } = usePagination(getWhitelists);
onMounted(() => {
  refreshPagination();
});
//移除白名单
function remove() {}

const userListModal = ref(false);
function add() {
  userListModal.value = true;
}
</script>
<style lang="less">
.user-drawer {
  .ant-descriptions-item-label {
    width: 160px;
  }
  .ant-descriptions-item-content {
    justify-content: flex-end;
  }
}
</style>
